<template>
  <el-menu class="el-menu-vertical" :collapse="isCollapse">
    <el-submenu :popper-append-to-body="true" :index="el.moduleKey" :key="i" v-for="(el, i) in getRouters">
      <template slot="title">
        <i  class="iconfont" :class="el.moduleIcon"></i>
        <span slot="title">{{ el.moduleName }}</span>
      </template>
      <el-menu-item-group  :key="children.moduleKey" v-for="(children) in el.children">
        <template v-if="children.moduleKey!=='DashboardDetail'">
            <span slot="title">{{ children.moduleName }}</span>
            <el-menu-item @click="setRouter(menu)" :index="menu.moduleUrl" :key="menu.moduleKey" v-for="(menu) in children.children">{{menu.moduleName}}</el-menu-item>
        </template>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: "menus",
  computed:{
    getRouters(){
      return this.$store.state.setRouter.routes
    }
  },
  data(){
    return{
      isCollapse:true
    }
  },
  methods:{
    setRouter(menu){
      this.$store.dispatch('tabs/setRouter',menu)
    }
  }
}
</script>

<style scoped>

</style>